<template>
  <div class="articles-area" v-if="isShow">
    <el-card style="text-align: left;width: 1490px;margin: 35px auto 0 auto">
      <div>
        <div class="markdown-body">
          <div v-html="note.noteHtml"></div>
        </div>
      </div>
    </el-card>
  </div>
</template>

<script>
export default {
  name: "NoteDetails",
  props:{
    noteId:{
      type:Number,
      default:()=>{return 0}
    }
  },
  data(){
    return{
      note:{
        noteId:-1,
        noteHtml:'',
      },
      isShow:false,
      id:this.noteId
    }
  },
  methods:{
    /*
    加载md内容
     */
    getNote(){
      this.$axios.get(`/note/get/noteId=${this.id}`).then(res=>{
        // console.log(this.id)
        if(res.data.data!=null) {
          this.note.noteHtml = res.data.data.noteHtml
          //对笔记本内容进行转义
          var temp = document.createElement("div");
          temp.innerHTML = this.note.noteHtml;
          this.note.noteHtml = temp.innerText || temp.textContent;
          this.isShow=true
        }
      }).catch(failRes=>{
        console.log(failRes)
      })
    },
  },
  mounted() {
  },
  watch: {
    'id':{
      handler(newVal) {
        this.id = newVal
        this.getNote()
      },
      immediate:true
    }
  },
  computed:{

  }
}
</script>

<style scoped>
  @import "../../../src/assets/css/markdown.css";
</style>
